<template>
  <view class="addanchor_wrap">
    <!-- 添加主播信息模态框 -->
    <neil-modal
      :show="showadd"
      :autoClose="true"
      :showCancel="false"
      @close="closeModal"
      title="新主播信息"
      @confirm="addzbinfo()"
    >
      <view class="input-view">
        <view class="mtk-input input-name">
          <view>抖音账号</view>
          <input
            v-show="showadd"
            type="text"
            placeholder="请输入抖音号"
            v-model="anchorInfo.third_user_id"
          />
        </view>
        <view class="mtk-input input-password">
          <view>真实姓名</view>
          <input v-show="showadd" type="text" placeholder="请输入真实姓名" v-model="anchorInfo.real_name" />
        </view>
        <view class="mtk-input input-password">
          <view>手机号码</view>
          <input
            v-show="showadd"
            type="text"
            number
            placeholder="请输入手机号码"
            v-model="anchorInfo.mobile"
          />
        </view>
        <view class="mtk-input input-password myselect">
          <view>分账比例</view>
          <picker
            @change="bindPickerChange"
            value="{{index}}"
            range="{{array}}"
            style="width：210px"
          >
            <view class="picker">
              {{array[index]}}
              <i class="iconfont icon-iconfontyoujiantou-copy"></i>
            </view>
          </picker>
        </view>
      </view>
    </neil-modal>
  </view>
</template>

<script>
import neilModal from "./neil-modal";
export default {
  components: {
    neilModal
  },
  data() {
    return {
      // 待添加的主播对象
      anchorInfo: {},
      // 分账比例
      array: ["40%+5%", "45%+5%", "50%+5%"],
      index: 0,
      split_ratio: 40,
      zblist: []
    };
  },
  props: {
    showadd: Boolean
  },
  methods: {
    // 添加主播
    // 提交增加主播信息
    bindPickerChange(e) {
      this.index = e.detail.value;
      this.split_ratio =
        e.detail.value == 0 ? 40 : e.detail.value == 1 ? 45 : 50;
      console.log(this.split_ratio);
    },
    addzbinfo() {
      const that = this;
      // 先做表单校验，再发请求提交
      let regMob = /(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/;
      if (!this.anchorInfo.third_user_id) {
        uni.showToast({
          title: "抖音账号不能为空",
          icon: "none"
        });
        this.$emit("changshow", true);
        return;
      }
      if (!this.anchorInfo.real_name) {
        uni.showToast({
          title: "真实姓名不能为空",
          icon: "none"
        });
        this.$emit("changshow", true);
        return;
      }
      if (!regMob.test(this.anchorInfo.mobile)) {
        uni.showToast({
          title: "请输入正确格式手机号",
          icon: "none"
        });
        this.$emit("changshow", true);
        return;
      }
      this.anchorInfo.split_ratio = this.split_ratio;
      this.$http({
        url: "/api/anchor/create",
        method: "POST",
        data: this.anchorInfo
      }).then(res => {
        if (res.code == 401) {
          uni.reLaunch({
            url: "/pages/authorise/index"
          });
          return;
        }
        if (res.code == 1) {
          this.anchorInfo = { third_user_id: "", real_name: "", mobile: "" };
          uni.showToast({
            title: res.msg
          });
          // 提交后无需重新获取列表数据，只提示是否添加成功既可，因为，是否真实邀约成功需要后台操作
        } else {
          this.anchorInfo = { third_user_id: "", real_name: "", mobile: "" };
          uni.showToast({
            title: res.msg,
            icon: "none"
          });
        }
      });

      this.$http({
        url: "/api/anchor/lists",
        method: "GET"
      }).then(res => {
        if (res.code == 401) {
          // 未登录状态，跳转到授权页
          uni.reLaunch({
            url: "/pages/authorise/index"
          });
        }
        if (!(res.data.list.length == 0)) {
          this.zblist = res.data.list;
        }
      });
      this.$emit("regetAnchorList", this.zblist);
    },
    closeModal() {
      this.$emit("changshow", false);
    }
  }
};
</script>

<style lang='scss' scoped>
.addanchor_wrap {
  .neil-modal__header {
    color: red;
    font-weight: bolder;
    line-height: 2.25;
    text-align: left;
    letter-spacing: 2px;
  }
  .myselect {
    width: 100%;
    position: relative;
    input {
      cursor: pointer;
    }
    i {
      cursor: pointer;
    }
  }
  .mtk-input {
    height: 80upx;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    padding-left: 30upx;
    box-sizing: border-box;
    picker {
      width: 190px;
      view {
        position: relative;
        i {
          position: absolute;
          right: -110px;
          top: 15px;
          transform: rotate(90deg);
        }
      }
    }
  }

  .mtk-input::after {
    content: " ";
    position: absolute;
    left: 30upx;
    bottom: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid #e5e5e5;
    transform-origin: 0 0;
    transform: scaleY(0.5);
  }

  .mtk-input view {
    width: 120upx;
    height: 50upx;
    line-height: 50upx;
    font-size: 28upx;
    color: #333333;
    margin: 20rpx;
  }

  .mtk-input input {
    flex: 1;
    height: 50upx;
    line-height: 50upx;
  }
}
.neil-modal__footer-left,
.neil-modal__footer-right {
  line-height: 120rpx;
  height: 0;
}
</style>